<template>
	<view class="pageAll">
		<view class="collapse">
			<view class="collapseTitle" @click="openCollapse">
				<view class="collapseIconView">
					<view class="subCollapseIconView">
						<image :src="isClick ? minusIcon : plusIcon" mode="widthFix"/>
					</view>
				</view>
				<view class="collapseText">
					<text>自行发货</text>
				</view>
			</view>
			<view class="collapseContent" :class="{'collapseContentActiveSelf':isClick}">
				<view class="contentImg">
					<view class="contentLeft">
						<text>车牌照片</text>
					</view>
					<view class="contentRightImg">
						<cross class="rightImg" @getImageTempPaths="getImageTempPaths" cssClass="License" imgType="1" tipText="点击上传车牌" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>车牌号码</text>
					</view>
					<view class="contentRight">
						<input type="text" v-model="formSelf.code" placeholder="不需要输入“ · ”" placeholder-style="color:#b57979" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>发货联系人</text>
					</view>
					<view class="contentRight">
						<input type="text" v-model="formSelf.principal" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>联系人电话号码</text>
					</view>
					<view class="contentRight">
						<input type="number" v-model="formSelf.phone" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>退货地址</text>
					</view>
					<view class="contentRight">
						<input type="text" v-model="formSelf.address" />
					</view>
				</view>
			</view>
		</view>
		<view class="collapse">
			<view class="collapseTitle" @click="openCollapse">
				<view class="collapseIconView">
					<view class="subCollapseIconView">
						<image :src="isClick ? plusIcon : minusIcon" mode="widthFix"/>
					</view>
				</view>
				<view class="collapseText">
					<text>
						快递发货
					</text>
				</view>
			</view>
			<view class="collapseContent" :class="{'collapseContentActive':!isClick}">
				<view class="contentImg">
					<view class="contentLeft"></view>
					<view class="contentRightCode">
						<scanCode @getScanCodeInfo="getScanCodeInfo" class="rightCode" tipText="扫描二维码获取快递信息" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>
							发货联系人
						</text>
					</view>
					<view class="contentRight">
						<input type="text" v-model="form.principal" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>
							联系人电话号码
						</text>
					</view>
					<view class="contentRight">
						<input type="number" v-model="form.phone" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>
							快递单号
						</text>
					</view>
					<view class="contentRight">
						<input type="text" v-model="form.code" />
					</view>
				</view>
				<view class="content">
					<view class="contentLeft">
						<text>退货地址</text>
					</view>
					<view class="contentRight">
						<input type="text" v-model="form.address" />
					</view>
				</view>
			</view>
		</view>

		<view class="bottomBtnView">
			<button class="bottomBtn" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import cross from '../../../components/commonCom/cross.vue'
	import scanCode from '../../../components/purchaseOrder/scanCode.vue'
	import {
		uploadFile
	} from '@/utils/alioss.js'
	import {
		HBValidate
	} from '../../../utils/tools.js'
	export default {
		data() {
			return {
				isClick: true, // true 自行发货开， false 快递发货开
				orderId: null,
				formSelf: {
					principal: '',
					phone: '',
					code: '',
					picture: '',
					distribution_type: 'distribution',
					address:'',
				},
				form: {
					principal: '',
					phone: '',
					code: '',
					picture: '',
					distribution_type: 'expressage',
					address:'',
				},
				plusIcon:require('@/static/icon/plus.png'),
				minusIcon:require('@/static/icon/minus.png')
			}
		},
		methods: {
			submit() {
				const validate = new HBValidate()
				let tempForm = {}
				let isCode = true
				if (this.isClick) {
					tempForm = this.formSelf
					// isCode = validate.isVehicleNumber(tempForm.code)
					// if (!tempForm.picture) {
					// 	uni.showToast({
					// 		title: '请先上传车牌照片',
					// 		icon: 'none',
					// 		duration: 1500
					// 	})
					// 	return false
					// }
				} else {
					tempForm = this.form
					// isCode = validate.isRightfulString(tempForm.code)
				}


				if (!validate.isPhone(tempForm.phone)) {
					uni.showToast({
						title: '手机号码格式错误'+tempForm.phone,
						icon: 'none',
						duration: 1500
					})
				} else if (!tempForm.principal) {
					if (this.isClick) {
						uni.showToast({
							title: '发货联系人不能为空',
							icon: 'none',
							duration: 1500
						})
					} else {
						uni.showToast({
							title: '发货负责人不能为空',
							icon: 'none',
							duration: 1500
						})
					}
				} else if (!isCode) {
					if (this.isClick) {
						uni.showToast({
							title: '车牌号码格式错误',
							icon: 'none',
							duration: 1500
						})
					} else {
						uni.showToast({
							title: '快递单号格式错误',
							icon: 'none',
							duration: 1500
						})
					}
				} else if (!tempForm.address) {
						uni.showToast({
							title: '退货地址不能为空',
							icon: 'none',
							duration: 1500
						})
						return false
				} else {
					this.$api.orderDeliver({
							id: this.orderId,
							principal: tempForm.principal,
							phone: tempForm.phone,
							code: tempForm.code,
							picture: tempForm.picture,
							distribution_type: tempForm.distribution_type,
							supplier_address: tempForm.address
						})
						.then(res => {
							if (res.status) {
								uni.showToast({
									title: res.msg,
									duration: 1000,
									icon: 'success'
								})

								// 提示完后延时跳转
								setTimeout(() => {
									uni.switchTab({
										url: '../purchaseOrder/purchaseOrder'
									})
								}, 1000)
								this.$store.commit('setOrderCurrTag', 3)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
						})
				}

			},
			openCollapse() {
				this.isClick = !this.isClick
			},
			getScanCodeInfo(value) {
				this.$set(this.form, 'code', value.result)
			},
			getImageTempPaths(value) {
				uploadFile(value.img)
					.then(res => {
						this.formSelf.picture = res.data.url
					})
					.catch(res => {
						uni.showToast({
							title: '图片上传失败'
						})
					})
			}
		},
		components: {
			cross,
			scanCode,
		},
		onLoad(option) {
			console.log(option.id)
			this.orderId = option.id
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.collapse {
		padding: 17upx;
		background-color: #FFF;
		border-radius: 10upx;
		box-shadow: 0 0 30upx -15upx #f03d3d;
	}

	.collapseTitle {
		display: flex;
		line-height: 61.33upx;
	}

	.collapseIconView {
		width: 61.33upx;
		height: 61.33upx;
		background-color: #f7533e;
		border-radius: 50%;
		margin-right: 25upx;
		text-align: center;
		display: flex;
	}
	.subCollapseIconView{
		margin: auto;
		width: 61.33upx;
		height: 61.33upx;
	}
	.subCollapseIconView image{
		width: 61.33upx;
	}
	.collapseIcon {}

	.plus-icon {
		background: #FFF;
		height: 33.33upx;
		width: 7.33upx;
		border-radius: 10upx;
		display: inline-block;
		position: relative;
	}

	.plus-icon:after {
		border-radius: 10upx;
		background: #FFF;
		content: "";
		height: 33.33upx;
		left: 0;
		position: absolute;
		top: 0;
		width: 7.33upx;
		transform: rotateZ(90deg)
	}

	.minus-icon {
		background: #FFF;
		height: 33.33upx;
		width: 7.33upx;
		transform: rotateZ(90deg);
		text-align: center;
		line-height: 33.33upx;
		display: inline-block;
		position: relative;
	}

	.collapseText {
		font-size: 36upx;
		color: #333333;
		font-weight: bold;
		letter-spacing: 5upx;
	}

	.collapseContent {
		height: 0;
		overflow: hidden;

		transition-property: height;
		transition-duration: 0.6s;
		perspective: 1000px;
		transform-style: preserve-3d;
	}

	.collapseContentActiveSelf {
		height: 415upx;
	}
	.collapseContentActive{
		height: 430upx;
	}
	.contentImg {
		display: flex;
		flex-wrap: nowrap;
		hieght: 40upx;
		line-height: 40upx;
		padding: 10upx 0 26.66upx 0;
	}

	.contentLeft {
		width: 37%;
		display: flex;
	}

	.contentLeft text {
		margin: auto 0;
		display: inline-block;
		width: 100%;
		text-align: right;
		font-size: 26.66upx;
		color: #333333;
	}

	.contentRight {
		width: 63%;
		padding: 0 25upx;
		font-size: 26.66upx;
		color: #333333;
	}

	.contentRight input {
		border-bottom: 1upx solid #ffc8c7;
	}

	.contentRightImg {
		width: 60%;
		display: flex;
		padding: 0 25upx;
	}

	.contentRightImg .rightImg {
		margin: 0 auto;
	}

	.contentRightCode {
		width: 60%;
		display: flex;
	}

	.rightCode {
		margin: 0 auto;
	}

	.content {
		height:66.66upx;
		display: flex;
		flex-wrap: nowrap;
	}

	.bottomBtnView {
		position: absolute;
		bottom: 250upx;
		width: 96%;
	}

	.bottomBtn {
		height: 100upx;
		background-color: #f7533e;
		color: #FFF;
		font-weight: bold;
		letter-spacing: 10upx;
		line-height: 100upx;
	}

	.container {
		width: 266.66upx;
		height: 266.66upx;
		position: relative;
		border: 1px solid #ccc;
		background-color: #033333;
	}

	.parent1 {
		/* overall animation container */
		height: 0;
		overflow: hidden;

		transition-property: height;
		transition-duration: 1s;
		perspective: 1000px;
		transform-style: preserve-3d;
		background-color: #FFF7F5;
	}

	.parent2 {
		/* full content during animation *can* go here */
	}

	.parent3 {
		/* animated, "folded" block */
		height: 56px;
		transition-property: all;
		transition-duration: 1s;
		transform: rotateX(-90deg);
		transform-origin: top;
		background-color: #66ccff;
	}

	/* Hover states to trigger animations */
	.parent1active {
		height: 74upx;
	}

	.parent3active {
		transform: rotateX(0deg);
		height: 74upx;
	}
</style>
